.blur {
  filter: url(../images/blur.svg#blur);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -mz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
.validate-error {
  color: red;
  border-color: red !important;
  vertical-align: middle;
}
span.validate-error {
  margin-left: 5px;
}
.button,
button {
  display: inline-block;
  height: 30px;
  padding: 0 15px;
  line-height: 30px;
  text-align: center;
  outline: none;
  background: #8aa1ad;
  cursor: default;
  color: white;
  border: none;
  box-sizing: content-box;
}
.button:hover,
button:hover,
.button.hover,
button.hover {
  background: #a8b9c2;
}
.button:active,
button:active,
.button.active,
button.active {
  background: #7b95a3;
}
.button:disabled,
button:disabled {
  background: #CCC;
}
.button:disabled:hover,
button:disabled:hover,
.button:disabled.hover,
button:disabled.hover,
.button:disabled:active,
button:disabled:active,
.button:disabled.active,
button:disabled.active {
  background: #CCC;
}
.loading .loading-target {
  filter: url(../images/blur.svg#blur);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -mz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}
.loading:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(128, 130, 140, 0.75);
  -webkit-animation: fadeIn 3s ease;
  -moz-animation: fadeIn 3s ease;
  -ms-animation: fadeIn 3s ease;
  -o-animation: fadeIn 3s ease;
  animation: fadeIn 3s ease;
  z-index: 110;
}
.loading:before {
  content: ' ';
  width: 40px;
  height: 40px;
  border: 4px solid;
  border-color: #c9ced1 transparent transparent;
  box-shadow: 0 0 35px white;
  z-index: 10;
  border-radius: 100%;
  -webkit-animation: rotate 1.33s ease infinite;
  -moz-animation: rotate 1.33s ease infinite;
  -ms-animation: rotate 1.33s ease infinite;
  -o-animation: rotate 1.33s ease infinite;
  animation: rotate 1.33s ease infinite;
  filter: none;
  -webkit-filter: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -24px;
  margin-top: -24px;
  z-index: 111;
}
@-webkit-keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html,
body,
div {
  margin: 0;
  padding: 0;
}
body,
svg {
  font-family: "Microsoft Yahei", "Heiti SC", Arial, sans-serif;
}
html,
body {
  height: 100%;
}
#content-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
  background: url('../img/bg.jpg');
}
#content-wrapper.loading.notlogin:after {
  background: rgba(128, 130, 140, 0.85);
  -webkit-animation: fadeIn 3s ease;
  -moz-animation: fadeIn 3s ease;
  -ms-animation: fadeIn 3s ease;
  -o-animation: fadeIn 3s ease;
  animation: fadeIn 3s ease;
}
#chess {
  height: 726px;
  width: 600px;
  margin: 0 auto;
  position: relative;
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-position: 0 -28px;
  -moz-user-select: none;
}
#chess:focus {
  /*         box-shadow: inset 0 0 10px fadeOut(black, 0.5); */
}
#main-panel {
  position: absolute;
  width: 100%;
  top: 300px;
}
#main-panel > .main {
  width: 125px;
  height: 47px;
  display: block;
  margin: 0 auto 15px auto;
  background-color: transparent;
  background-position: 0px -1px;
  background-repeat: no-repeat;
  border-radius: 10px;
}
#main-panel > .main.main-online {
  background-image: url('../image/online.png');
}
#main-panel > .main.main-start {
  background-image: url('../image/start.png');
}
#main-panel > .main.main-create {
  background-image: url('../image/createroom.png');
}
#main-panel > .main.main-join {
  background-image: url('../image/joinroom.png');
}
#main-panel > .main:hover {
  background-position: 0px -61px;
}
#main-panel > .main:active {
  background-position: 0px -125px;
}
#options-panel {
  position: absolute;
  top: 550px;
  right: -100px;
}
#options-panel > button {
  display: block;
  width: 80px;
  background-color: transparent;
  background-position: 0px -1px;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 0;
}
#options-panel > button.undo {
  background-image: url('../image/undo.png');
}
#options-panel > button.draw {
  background-image: url('../image/draw.png');
}
#options-panel > button.fail {
  background-image: url('../image/fail.png');
}
#options-panel > button:hover {
  background-position: 0px -53px;
}
#options-panel > button:active {
  background-position: 0px -103px;
}
#time-panel {
  position: absolute;
  top: 300px;
  width: 100%;
}
#time-panel > .j0-time,
#time-panel > .J0-time {
  width: 250px;
  height: 100px;
  position: absolute;
  padding-left: 90px;
  background-repeat: no-repeat;
  background-color: transparent;
}
#time-panel > .j0-time > p,
#time-panel > .J0-time > p {
  font-size: 17px;
  line-height: 30px;
  color: black;
  font-weight: 900;
}
#time-panel > .j0-time.right-bottom,
#time-panel > .J0-time.right-bottom {
  right: -260px;
  bottom: -230px;
}
#time-panel > .j0-time.left-top,
#time-panel > .J0-time.left-top {
  left: -260px;
  top: -85px;
}
#time-panel > .j0-time.active {
  background-image: url('../image/2.png');
}
#time-panel > .J0-time.active {
  background-image: url('../image/J.png');
}
/**
    载入动画
*/
.spinner {
  margin: 10px auto;
  width: 100px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #A91E1B;
  height: 100%;
  width: 6px;
  border-radius: 4px;
  margin: 0 5px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
